<template>
	<div class="personal-bill">
		<template>
		  <!--我的账单-->
			<v-title>{{$t('message.myBill')}}</v-title>
			<div class="personal-bill-pay">
				<div class="personal-bill-pay-left">
				  <!--近7日待还(元)-->
					<div class="pay-top-label">{{$t('message.lastSevenDaysNeedReturn')}}({{ $t('message.currencySymbol') }})</div>
					<div class="pay-top-num">{{ sectionAwait }}</div>
				</div>
				<div class="personal-bill-pay-right">
          <!--总待还(元)-->
					<div class="pay-top-label">{{$t('message.totalNeedReturn')}}({{ $t('message.currencySymbol') }})</div>
					<div class="pay-top-num">{{ sumAwait }}</div>
				</div>
			</div>
			<div class="personal-list">
				<div class="personal-list-header">
					<div class="personal-list-link-group">
					  <!--待还账单-->
						<router-link to="notPay" class="personal-list-link link-left" tag="div" active-class="personal-list-link-active">
							{{ $t('message.billNeedReturn') }}
						</router-link>
						<!--已还账单-->
						<router-link to="hasPaid" class="personal-list-link" tag="div" active-class="personal-list-link-active">
							{{ $t('message.billReturned') }}
						</router-link>
					</div>
					<div class="personal-list-search">
						<div class="search-input">
						  <!--输入订单名称进行搜索-->
							<input type="text" v-model="searchValue" :placeholder="$t('message.billSearchDesc')" @keyup.enter="searchOrderList"/>
						</div>
						<div class="search-btn">
							<button @click="searchOrderList" type="button"></button>
						</div>
					</div>
				</div>
				<ul class="personal-list-title">
				  <!--订单信息-->
					<li class="title-info">{{ $t('message.orderInfo') }}</li>
					<!--分期数-->
					<li class="title-number">{{ $t('message.stagingNumber') }}</li>
					<template v-if="isNotPay">
					  <!--本期应付-->
						<li class="title-pay">{{ $t('message.thisPeriodNeedPay') }}</li>
						<!--最后还款日期-->
						<li class="title-date">{{ $t('message.lastReturnDay') }}</li>
					</template>
					<template v-else>
					  <!--每期应付-->
						<li class="title-pay">{{ $t('message.everyPeriodNeedPay') }}</li>
            <!--订单金额-->
						<li class="title-date">{{ $t('message.billPrice') }}</li>
					</template>
					<!--还款状态-->
					<li class="title-status">{{ $t('message.periodStatus') }}</li>
					<!--操作-->
					<li class="title-operation">{{ $t('message.operation') }}</li>
				</ul>
			</div>
		</template>
		<div class="personal-list-content">
			<router-view :keyword="keyword"></router-view>
		</div>
	</div>
</template>

<script>
import VTitle from '@/components/base/VTitle'

export default {
  name: 'PersonalBill',
  components: {
    VTitle
  },
  data () {
    return {
      sectionAwait: 0,
      sumAwait: 0,
      searchValue: '',
      keyword: ''
    }
  },
  computed: {
    isNotPay () {
      if (this.$route.name.indexOf('NotPay') !== -1) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    searchOrderList () {
      this.keyword = this.searchValue
    }
  },
  created () {
    this.$ajax.stayBills().then((res) => {
      if (res.code === 200) {
        this.sectionAwait = res.data.near_always_stay
        this.sumAwait = res.data.always_stay
      } else {
        console.log('获取待还金额失败')
      }
    })
  }
}
</script>

<style scoped>
.personal-bill {
	padding: 40px;
  padding-bottom: 0;
}

.personal-bill-pay {
	margin-top: 60px;
	overflow: hidden;
}

.personal-bill-pay-left {
	float: left;
	width: 230px;
	height: 70px;
	border-right: 1px solid #e6e6e6;
}

.pay-top-label {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #666;
}

.pay-top-num {
	height: 39px;
	line-height: 39px;
	font-size: 34px;
	color: #333;
	letter-spacing: 1px;
	margin-top: 8px;
}

.personal-bill-pay-right {
	float: left;
	height: 70px;
	padding-left: 80px;
}

.personal-list {
	margin-top: 58px;
}

.personal-list-header {
	height: 41px;
	overflow: hidden;
}

.personal-list-link-group {
	float: left;
	width: 604px;
	border-bottom: 1px solid #e6e6e6;
}

.personal-list-link {
	float: left;
	height: 38px;
	line-height: 40px;
	padding: 0 24px;
	cursor: pointer;
}

.personal-list-link-active {
	color: #ff600a;
	border-bottom: 2px solid #ff600a;
}

.personal-list-header .link-left {
	margin-right: 1px;
	position: relative;
}

.personal-list-header .link-left:after {
	content: '';
	display: block;
	width: 0;
	height: 16px;
	border-right: 1px solid #e6e6e6;
	position: absolute;
	top: 12px;
	right: -1px;
}

.personal-list-search {
	float: right;
	width: 200px;
	margin-top: 7px;
	overflow: hidden;
}

.search-input {
	float: left;
	width: 166px;
	height: 34px;
}

.search-input input {
	width: 166px;
	height: 34px;
	padding: 0 11px;
	font-size: 12px;
	box-sizing: border-box;
	border: 1px solid #d7d7d7;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}

.search-btn {
	float: left;
	width: 34px;
	height: 34px;
}

.search-btn button {
	width: 34px;
	height: 34px;
	border: 1px solid #d7d7d7;
	border-left: 0;
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	background: url(../../../assets/images/personal/icon_search.png) no-repeat center;
	cursor: pointer;
}

.personal-list-title {
	height: 52px;
	background-color: #fafafa;
	margin-top: 24px;
	padding: 0 24px;
	overflow: hidden;
}

.personal-list-title li {
	float: left;
	height: 52px;
	line-height: 52px;
	font-size: 14px;
	color: #333;
}

.title-info {
	width: 256px;
}

.title-number {
	width: 106px;
}

.title-pay {
	width: 118px;
}

.title-date {
	width: 148px;
}

.title-status {
	width: 118px;
}

.title-operation {
	width: 70px;
}

.personal-list-content {
}
</style>
